import styled from '@emotion/styled';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

interface GetGeoLocationProps {
	location?: any;
	status?: string;
	userRole?: string;
	reason?: string;
	address?: string;
	id?: string;
}

const GetGeoLocationContainer = styled.div``;

const GetGeoLocationContent = styled.div`
	background-color: rgba(250, 250, 251, 1);
	margin: 0 14px;
`;

const Location = styled.p`
	font-size: 12px;
	color: #2a2a2a;
	padding: 0 0 5px 20px;
	margin: 0;
`;

const Failed = styled.p`
	font-size: 12px;
	text-align: center;
	color: #da5a5a;
	min-height: 100px;
`;

const UserRole = styled.div`
	font-size: 12px;
	color: #666666;
	margin-bottom: 6px;
	padding-left: 20px;
	padding-top: 16px;
	visibility: ${(props: GetGeoLocationProps) => (props.userRole === 'normal' ? 'hidden' : '')};
`;

const MapWrapper = styled.div`
	width: 100%;
	height: 100%;
	min-height: 215px;
	margin-top: 5px;
`;

const GetGeoLocaltion = (props: GetGeoLocationProps) => {
	const { t } = useTranslation();
	const { location, status, userRole, reason, address, id } = props;
	// let { lng, lat } = location;
	const [lng, setLng] = useState(location?.lng);
	const [lat, setLat] = useState(location?.lat);
	const [addressParsed, setAddressParsed] = useState<string>('');

	useEffect(() => {
		if (status === 'done') {
			initMap();
		}
	}, [status, address]);
	const initMap = () => {
		var map = new BMapGL.Map(`map-container-${id}`, {
			coordsType: 5, // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标，默认为5。
			// 指定完成后API将以指定的坐标类型处理您传入的坐标
			minZoom: 5,
			maxZoom: 20,
			poiIcon: false
		}); // 创建地图实例
		map.setDisplayOptions({
			poiIcon: false
		});
		var point = new BMapGL.Point(lng, lat); // 创建点坐标
		map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别


		map.enableScrollWheelZoom(false); //开启鼠标滚轮缩放

		// 创建地理编码实例, 并配置参数获取乡镇级数据
		var myGeo = new BMapGL.Geocoder({ extensions_town: true });
		// 根据坐标得到地址描述
		if (address) {
			// 将地址解析结果显示在地图上，并调整地图视野
			myGeo.getPoint(
				address,
				function (point: any) {
					if (point) {
						console.log('getPoint', point);
						setLng(point.lng.toFixed(7));
						setLat(point.lat.toFixed(7));
						map.centerAndZoom(point, 15);
						var marker = new BMapGL.Marker(point); // 创建标注
						map.addOverlay(marker); // 将标注添加到地图中
						marker.disableDragging(); // 不可拖拽
						// map.addOverlay(new BMapGL.Marker(point/*, { title: '北京市海淀区上地10街' }*/));
					} else {
						// alert('您选择的地址没有解析到结果！');
					}
				},
				address
			);
		} else {
			var marker = new BMapGL.Marker(point); // 创建标注
			map.addOverlay(marker); // 将标注添加到地图中
			marker.disableDragging(); // 不可拖拽
			myGeo.getLocation(new BMapGL.Point(lng, lat), (result: any) => {
				console.log('getLocation', result);
				if (result) {
					setAddressParsed(result.address);
				}
			});
		}

		setTimeout(function () {
			map && map.enableDragging(); //两秒后开启拖拽
			//map.enableInertialDragging();   //两秒后开启惯性拖拽
		}, 2000);
	};

	return (
		<GetGeoLocationContainer>
			<GetGeoLocationContent>
				<UserRole>{userRole === 'normal' ? '' : userRole}</UserRole>
				{status === 'done' ? <Location>{t('geo-location') + ': ' + `(${lng},${lat})`}</Location> : <Failed>{t('get-location-failed') + ': ' + (reason ? reason : t('request-timeout'))}</Failed>}
				{status === 'done' && <Location>{t('geo-address') + ': ' + (address ? address : addressParsed)}</Location>}
				{status === 'done' && <MapWrapper id={`map-container-${id}`} />}
			</GetGeoLocationContent>
		</GetGeoLocationContainer>
	);
};

export default GetGeoLocaltion;
